<template>
  <scroll-view class="product-list" scroll-y :scroll-into-view="scrollIntoView">
    <view 
      v-for="(category, index) in categories" 
      :key="category.id"
      :id="`category-${index}`"
      class="category-section"
    >
      <view class="category-title">{{ category.name }}</view>
      
      <view class="product-items">
        <view 
          v-for="product in category.products" 
          :key="product.id"
          class="product-item"
          @tap="$emit('add-to-cart', product)"
        >
          <image :src="product.image" class="product-image" mode="aspectFill"></image>
          
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <text v-if="product.description" class="product-desc">{{ product.description }}</text>
            
            <view class="product-bottom">
              <view class="product-price-box">
                <text class="product-price">¥{{ product.price }}</text>
                <text class="product-sales">月售{{ product.sales }}</text>
              </view>
              
              <view class="product-actions">
                <view 
                  v-if="getProductCount(product) > 0" 
                  class="action-btn decrease"
                  @tap.stop="$emit('decrease', product)"
                >
                  <uni-icons type="minus" size="16" color="#00C853"></uni-icons>
                </view>
                
                <text v-if="getProductCount(product) > 0" class="product-count">
                  {{ getProductCount(product) }}
                </text>
                
                <view 
                  class="action-btn increase"
                  @tap.stop="$emit('add-to-cart', product)"
                >
                  <uni-icons type="plus" size="16" color="#fff"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Product {
  id: number;
  name: string;
  description?: string;
  image: string;
  price: number;
  sales: number;
}

interface Category {
  id: number;
  name: string;
  products: Product[];
}

interface Props {
  categories: Category[];
  cartItems: any[];
}

const props = defineProps<Props>();
defineEmits(['add-to-cart', 'increase', 'decrease']);

// 获取商品在购物车中的数量
const getProductCount = (product: Product) => {
  return props.cartItems
    .filter(item => item.id === product.id)
    .reduce((sum, item) => sum + item.count, 0);
};

// 滚动到指定分类
const scrollIntoView = computed(() => '');
</script>

<style scoped>
.product-list {
  flex: 1;
  height: 100%;
  background-color: #fff;
}

.category-section {
  padding: 0 30rpx;
}

.category-title {
  padding: 30rpx 0 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 5;
}

.product-items {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  padding-bottom: 30rpx;
}

.product-item {
  display: flex;
  gap: 20rpx;
}

.product-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.product-desc {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 15rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.product-price-box {
  display: flex;
  align-items: baseline;
  gap: 10rpx;
}

.product-price {
  font-size: 32rpx;
  color: #ff3b30;
  font-weight: bold;
}

.product-sales {
  font-size: 22rpx;
  color: #999;
}

.product-actions {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.action-btn {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn.decrease {
  border: 2rpx solid #00C853;
  background-color: #fff;
}

.action-btn.increase {
  background-color: #00C853;
}

.product-count {
  font-size: 26rpx;
  color: #333;
  min-width: 40rpx;
  text-align: center;
}
</style>